import React, { useCallback, useEffect, useRef, useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import HomeIcon from "@material-ui/icons/Home";
import TitleIcon from "@material-ui/icons/Title";
import ExposurePlus2Icon from "@material-ui/icons/ExposurePlus2";
import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
import ImageIcon from "@material-ui/icons/Image";
import SmsIcon from "@material-ui/icons/Sms";
import { AppBar } from "@material-ui/core";
import PageContent from "./PageContent";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
  appBar: {
  },
}));

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      style={{ height: "100%" }}
      role="tabpanel"
      hidden={value !== index}
      id={`nav-tabpanel-${index}`}
      aria-labelledby={`nav-tab-${index}`}
      {...other}
    >
      {children}
    </div>
  );
}

const defaultRecords = {
  "calculation": {
    "access": 0,
    "passed": 0
  },
  "image": {
    "access": 0,
    "passed": 0
  },
  "totalAccess": 0,
  "slide": {
    "access": 0,
    "passed": 0
  },
  "sms": {
    "access": 0,
    "passed": 0
  },
  "passedAccess": 0,
  "text": {
    "access": 0,
    "passed": 0
  }
}

const myTabsActions = function() {}
myTabsActions.prototype.updateIndicator = () => {

}
myTabsActions.prototype.updateScrollButtons = () => {
  console.log('action');
}

export default function HeadBar() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const [records, setRecords] = useState(null)

  const loadAccessRecords = () => {
    fetch('/record', {
      method: 'GET',
      credentials: 'include',
      mode: 'cors'
    }).then((res) => {
      if (res.status >= 300) {
        return defaultRecords()
      } else {
        return res.json()
      }
    }).then((res) => {
      ['text', 'slide', 'calculation', 'image', 'sms'].forEach(type => {
        if (res[type] === undefined) {
          res[type] = {'passed': 0, 'access': 0}
        }
      });
      setRecords(res)
    })
  }

  if (records === null) {
    loadAccessRecords()
  }

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static" className={classes.appBar} color="default">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="scrollable"
          scrollButtons="auto"
        >
          <Tab label="首页" icon={<HomeIcon />} />
          <Tab label="文本验证码" icon={<TitleIcon />} />
          <Tab label="计算题验证码" icon={<ExposurePlus2Icon />} />
          <Tab label="滑动验证码" icon={<DoubleArrowIcon />} />
          <Tab label="图片验证码" icon={<ImageIcon />} />
          <Tab label="短信验证码" icon={<SmsIcon />} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0} children={<PageContent index={0} records={records === null ? defaultRecords : records} />} />
      <TabPanel value={value} index={1} children={<PageContent index={1} records={records === null ? defaultRecords : records} />} />
      <TabPanel value={value} index={2} children={<PageContent index={2} records={records === null ? defaultRecords : records} />} />
      <TabPanel value={value} index={3} children={<PageContent index={3} records={records === null ? defaultRecords : records} />} />
      <TabPanel value={value} index={4} children={<PageContent index={4} records={records === null ? defaultRecords : records} />} />
      <TabPanel value={value} index={5} children={<PageContent index={5} records={records === null ? defaultRecords : records} />} />
    </div>
  );
}
